import React from 'react'
import { Button, Form, message } from 'antd'
import BaseForm from '@comp/Form/index'
import { getUserEmailCode, editUserPass } from '@net/user/index'
import Search from 'antd/lib/input/Search'
import md5 from 'blueimp-md5'

export default class ForgetForm extends BaseForm {
    private time: number = 60
    constructor(props: any) {
        super(props)
        this.state = {
            column: [],
            btnabled: false,
            title: "发送验证码"
        }
    }
    public renderButton() {
        return (
            <div className="login_form_btn">
                <Button style={{ width: "100px" }} type="primary" onClick={() => { this.editUserPass() }}>确认</Button>
                <Button style={{ width: "100px" }} type="default" onClick={() => { this.resetFields() }}>重置</Button>
            </div>
        )
    }
    // 提交用户修改密码
    public editUserPass = () => {
        const values = this.formRef.current.getFieldsValue()
        const data = {
            userName: values.userName,
            passWord: md5(values.passWord2),
            emailCode: values.emailCode
        }
        if (values.userName === undefined || values.passWord1 === undefined || values.passWord2 === undefined || values.emailCode === undefined) {
            message.error("请输入信息")
        } else {
            editUserPass(data).then((res: any) => {
                const { msg, status } = res.data
                if (status === 203) {
                    message.error(msg)
                } else {
                    message.success(msg)
                    this.resetFields()
                }
            })
        }
    }
    // 获取邮箱验证码
    public getEmailCode = (value: any, event: any) => {
        const values = this.formRef.current.getFieldsValue()
        if (event.charCode !== undefined) {
            return
        } else {
            if (values.passWord1 === '' || values.passWord2 === '') {
                message.error("请输入密码！")
            } else if (values.passWord1 !== values.passWord2) {
                message.error("两次输入的密码不一致，请重新输入！")
            } else {
                const timer = setInterval(() => {
                    this.setState({ btnabled: true }, () => {
                        if (this.time <= 0) {
                            clearInterval(timer)
                            this.setState({ btnabled: false, title: "发送验证码" }, () => {
                                this.time = 60
                            })
                        } else {
                            this.time -= 1
                            this.setState({ title: this.time })
                        }
                    })
                }, 1000)
                getUserEmailCode(values.userName).then(res => {
                    const { msg, status } = res.data
                    if (status === 203) {
                        message.error(msg)
                    } else {
                        message.success(msg)
                    }
                })
            }
        }
    }
    public btnCode = (title: string) => {
        return (
            <Button type="primary" disabled={this.state.btnabled} style={{ width: "100px" }}>{title}</Button>
        )
    }
    public renderForm() {
        const { column } = this.props
        const formCol = {
            labelCol: { span: 8 },
            wrapperCol: { span: 16 }
        }
        const { title } = this.state
        return (
            <Form ref={this.formRef} {...formCol} className="forget_form">
                {
                    column.map((item) => {
                        return (
                            this.renderFormItem(item)
                        )
                    })
                }
                <Form.Item label="验证码" name="emailCode">
                    <Search
                        placeholder="请输入邮箱验证码"
                        enterButton={this.btnCode(title)}
                        size="middle"
                        onSearch={this.getEmailCode}
                    />
                </Form.Item>
            </Form>
        )
    }
}